<template>
  <el-dialog v-bind="settings" :visible.sync="settings.visible" @open="open">
    <div id="code-container" />
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { loginApi } from '@/api/api.js'

export default {
  data() {
    return {
      APPID: '',
      // APPID: 'wx25db18c5814dcebc',

      redirect_uri: '',
      // redirect_uri: 'http://whlay.cn.utools.club/',

      href: 'data:text/css;base64,' + 'LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgd2lkdGg6IDIyMXB4Owp9Ci5pbXBvd2VyQm94IC50aXRsZSB7CiAgZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAuaW5mbyB7CiAgd2lkdGg6IDIwMHB4Owp9Ci5zdGF0dXNfaWNvbiB7CiAgZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAuc3RhdHVzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KLmltcG93ZXJCb3ggLmluZm8gcDpsYXN0LW9mLXR5cGUgewogIGRpc3BsYXk6IG5vbmU7Cn0=',
      settings: {
        visible: false,
        unbandFlag: false
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    open() {
      this.init()
    },
    async init() {
      const res = await this.$request(loginApi.getWechatInfo)
      this.APPID = res.data.appId
      this.redirect_uri = res.data.redirectUri

      let state = this.settings.unbandFlag ? 'unbindWechat' : 'wechat'

      const _this = this
      new window.WxLogin({
        self_redirect: false,
        id: 'code-container',
        appid: _this.APPID,
        scope: 'snsapi_login',
        redirect_uri: _this.redirect_uri + encodeURIComponent('#/usercenter'),
        state,
        href: _this.href
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper ::v-deep.el-dialog {
  max-width: 421px;
}
::v-deep #code-container {
  display: flex;
  justify-content: center;
}
::v-deep iframe {
  height: 300px;
}
</style>
